<template>
    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <!-- <img src="" alt="公司Logo" class="logo"> -->
                <h1>人事及OA管理系统</h1>
            </div>

            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" size="large" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
                        size="large" show-password @keyup.enter="handleLogin" />
                </el-form-item>
                <div class="login-footer">
                    <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
                </div>
                <el-form-item>
                    <el-button type="primary" size="large" class="login-btn" :loading="loading" @click="handleLogin">
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import request from "@/api/request"

let router = useRouter()

// 登录表单
let loginForm = reactive({
    username: '',
    password: ''
})

// 表单验证规则
let loginRules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在1到20个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, max: 4, message: '验证码为4位字符', trigger: 'blur' }
    ]
})

// 控制变量
let loading = ref(false)
let rememberMe = ref(false)
let showCaptcha = ref(false)
let captchaImage = ref('')
let forgetDialogVisible = ref(false)
let loginFormRef = ref<FormInstance>()

// 初始化检查记住的账号
onMounted(() => {
    let rememberAccount = localStorage.getItem('remember_account')
    if (rememberAccount) {
        let account = JSON.parse(rememberAccount)
        loginForm.username = account.username
        loginForm.password = account.password
        rememberMe.value = true
    }

})

// 处理登录
let handleLogin = async () => {
    try {
        await loginFormRef.value?.validate()
        loading.value = true
        // 记住密码处理
        if (rememberMe.value) {
            localStorage.setItem('remember_account', JSON.stringify({
                username: loginForm.username,
                password: loginForm.password
            }))
        } else {
            localStorage.removeItem('remember_account')
        }

        // 调用登录接口
        // await userStore.login({
        //   username: loginForm.username,
        //   password: loginForm.password,
        //   captcha: loginForm.captcha
        // })
        request({
            url: "/system/user/log",
            method: "post",
            params: loginForm
        }).then(resp => {
            console.log(resp);

            // 登录成功后跳转
            if (resp.code == 200) {
                ElMessage.success(resp.msg)
                sessionStorage.setItem("token", resp.data.token)
                sessionStorage.setItem("user", JSON.stringify(resp.data.user)) // 保存用户信息
                router.push("/home")
            }
        })
    } catch (error) {
        console.error('登录失败:', error)
    } finally {
        loading.value = false
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    background-size: cover;
    background-position: center;

    .login-box {
        width: 420px;
        padding: 40px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

        .login-header {
            text-align: center;
            margin-bottom: 30px;

            .logo {
                height: 60px;
                margin-bottom: 15px;
            }

            h1 {
                font-size: 24px;
                color: #333;
                margin: 0;
            }
        }

        .login-form {
            .captcha-container {
                display: flex;
                align-items: center;
                width: 100%;

                .captcha-image {
                    height: 40px;
                    margin-left: 10px;
                    cursor: pointer;
                    border-radius: 4px;
                    border: 1px solid #dcdfe6;
                }
            }

            .login-btn {
                width: 100%;
                margin-top: 10px;
            }
        }

        .login-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            font-size: 14px;
        }
    }
}

@media (max-width: 768px) {
    .login-container {
        padding: 20px;

        .login-box {
            width: 100%;
            padding: 30px 20px;
        }
    }
}
</style>